<template>
	<div class="box" style="margin-top: 30px; background-color: white;">
		<div class="tjkc-box">
			<div class="top-box">
				<span>
					<i class="el-icon-document"></i>
						推荐课程
				</span>
			</div>
			<div v-for="item in kechengList" :key="item.id" class="kt-xq-box" style="margin-top: 20px;">
				<div class="img-box">
					<img style="width:189px;border-radius: 15px;margin-top: 10px;" :src="item.coverSrc" alt="">
				</div>
				<div class="name-box" style="margin-left: 20px;">
					<el-link :underline="false" style="font-size: 17px;color: black;margin-top: 10px;">{{ item.name }}</el-link>
					<div class="size-box">
						<el-link :underline="false" style="margin-bottom: 10px;">
						<i class="el-icon-document-copy">阶段课程</i>
					</el-link>
					<p>
						<i class="el-icon-view" style="margin-right: 10px;color: #606266">550</i>
						<i class="el-icon-tickets" style="color: #606266">0</i>
					</p>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2KeChengTuijian',

	data() {
		return {
			count:[1,1,1,1],
			kechengList: [],
		};
	},

	mounted() {
		
	},
	created() {
    this.getKecheng()
  },
	methods: {
		getKecheng(){


      this.request.get("/salesCourse/group").then(res =>{
        if(res.code === "200"){
          this.kechengList = res.data
			
					this.kechengList = this.kechengList.map(item=>{
						return item.children
					})[0]
					console.log("课程数据",this.kechengList)
        }else {
          this.$message.error(res.msg)
        }
      })
    }
	},
};
</script>

<style lang="less" scoped>
.box{
	padding: 20px;
	border-radius: 15px;
	box-shadow:5px 5px 10px rgb(177, 177, 177);
}
.kt-xq-box{
	display: flex;
	cursor: pointer;
}
.kt-xq-box:hover{
	background-color: rgba(192, 190, 190, 0.527);
}
.name-box{
	height: 120px;
	display: flex;
	justify-content: space-between;
	// align-content: space-between;
	flex-direction: column;
	flex-wrap: wrap;
}
</style>